import {AfterViewInit, Component, Input, OnInit} from '@angular/core';

import {GetRTDataByKKSCodesService} from '../../../services/get-rtdata-by-kkscodes.service'
import {init} from "protractor/built/launcher";

@Component({
  selector: 'app-group-level-status',
  templateUrl: './group-level-status.component.html',
  styleUrls: ['./group-level-status.component.css','../../../../../assets/css/button.css']
})
export class GroupLevelStatusComponent implements OnInit, AfterViewInit  {

  constructor(
    private getData:GetRTDataByKKSCodesService
  ) { }

  ngOnInit() {
  }

  public initData:number[]=[]
  public chartOptions

  @Input() id:number
  @Input() time:string

  //highcharts
  public ngAfterViewInit() {
    this.getData.getDataByComponent('StatusPie',null,this.id,this.time)
      .subscribe(
        data=>{
            this.initData=data;
            this.initChart()
        },
        error=>{
          console.log(error)
        }
      )
    this.initData=[1,1,1]
    this.initChart()
/*    if (this.chartEl && this.chartEl.nativeElement) {
      opts.chart.renderTo = this.chartEl.nativeElement
      this._chart = new Highcharts.Chart(opts);
    }*/
  }

  public initChart(){
    let opts: any = {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
        backgroundColor: 'transparent',
        renderTo: ''
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: ''
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: false,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
              color: 'black'
            }
          }
        }
      },
      series: [{
        name: '占比',
        colorByPoint: true,
        data: [{
          name: '正常台数',
          y: this.initData[0],
          color:'green'
        }, {
          name: '预警台数',
          y: this.initData[1],
          // sliced: false,
          // selected: true,
          color:'yellow'
        }, {
          name: '报警台数',
          y: this.initData[2],
          color:'red'
        }]
      }]
    }
    this.chartOptions = opts
  }

}

